<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar fixed >
<!--      <template #left>-->
<!--        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>-->
<!--      </template>-->
      <template #title>
        <span style="color: #FF8800;font-size: 18px">注册</span>
      </template>
    </van-nav-bar>
    <!-- 注册 -->
    <div class="wrapper">
      <van-field
        class="input"
        v-model="countryName"
        name="国家地区"
        right-icon="arrow-down"
        readonly
        @click="choseCountry"
      />
      <van-field
        class="input"
        v-model="phoneNum"
        name="手机号"
        placeholder="手机号"
        type="tel"
        clearable
        label-width="70"
      >
        <template #label>
          <div style="text-align: left">
            <span>{{countryCode}}</span>
          </div>
        </template>
      </van-field>
      <van-field
        class="input"
        v-model="identifyCodeInput"
        name="图形验证码"
        placeholder="图形验证码"
        type="tel"
        clearable
        maxlength="4"
      >
        <template #button>
          <div @click="refreshIdentifyCode">
            <Identify slot="button" :identifyCode="identifyCode" @click="refreshIdentifyCode"></Identify>
          </div>
        </template>
      </van-field>
      <van-field
        class="input"
        v-model="smsCode"
        center
        clearable
        placeholder="短信验证码"
        type="tel"
        maxlength="4"
      >
        <template #button>
          <van-button size="small" color="#FF8800" round>获取</van-button>
        </template>
      </van-field>
      <div class="reg-btn">
        <van-button round block color="#FF8800" @click="onRegister">注册</van-button>
        <div style="text-align: right;margin:5px 5px;">
          <span style="font-size: 14px;" @click="onGoLogin">返回登录</span>
        </div>
      </div>
    </div>
    <!-- 选择国家 -->
    <CountryChose :show="isShowCountry" :onShowChange="onCountryShowChange" :onChose="onCoutryChose"></CountryChose>
  </div>
</template>

<script>
import Identify from '../../components/Identify'
import CountryChose from '../../components/CountryChose'
export default {
  name: 'Register',
  components: {
    Identify: Identify,
    CountryChose: CountryChose
  },
  data () {
    return {
      isShowCountry: false, // 是否显示国家
      countryName: '中国', // 国家名称
      countryCode: '+86', // 国家区号
      phoneNum: '', // 手机号
      identifyCodeInput: '', // 图形验证码
      identifyCode: 'EF89', // 图形验证码
      identifyCodes: '123456789',
      smsCode: '' // 短信验证码
    }
  },
  methods: {
    // 生成图形验证码
    makeIdentifyCode (cnt) {
      this.identifyCode = ''
      for (let i = 0; i < cnt; i++) {
        this.identifyCode += this.identifyCodes[this.$util.randomNum(0, this.identifyCodes.length)]
      }
    },
    // 刷新图形验证码
    refreshIdentifyCode () {
      this.makeIdentifyCode(4)
    },
    // 选择国家
    choseCountry () {
      this.isShowCountry = true
    },
    // 确认选择
    onCoutryChose (item) {
      this.countryName = item.name
      this.countryCode = item.code
      this.isShowCountry = false
    },
    // 显示状态变化
    onCountryShowChange (val) {
      this.isShowCountry = val
    },
    // 去登录
    onGoLogin () {
      this.$router.push('/login')
    },
    // 确认注册
    onRegister () {
    },
    // 返回
    onBack () {
    }
  }
}
</script>

<style scoped>
  .wrapper{
    padding: 60px 20px;
    margin: 0 auto;
  }
  .input{
    margin-bottom: 0px;
    font-size: 16px;
  }
  .reg-btn{
    margin: 20px 10px;
  }
</style>
